<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <!--导入bootstrap treeview插件-->
<link href="css/bootstrap-treeview.css" rel="stylesheet">
<script type="text/javascript" src="js/bootstrap-treeview.js"></script>
</head>
 <script type="text/javascript">
    //以下一段代码是权限树的级联效果，可以直接复制使用
    var nodeCheckedSilent = false;
    function nodeChecked(event, node) {
        if (nodeCheckedSilent) {
            return;
        }
        nodeCheckedSilent = true;
        checkAllParent(node);
        checkAllSon(node);
        nodeCheckedSilent = false;
    }
    var nodeUncheckedSilent = false;
    function nodeUnchecked(event, node) {
        if (nodeUncheckedSilent)
            return;
        nodeUncheckedSilent = true;
        uncheckAllParent(node);
        uncheckAllSon(node);
        nodeUncheckedSilent = false;
    }
    //选中全部父节点
    function checkAllParent(node) {
        $('#searchTree').treeview('checkNode', node.nodeId, {
            silent: true
        });
        var parentNode = $('#searchTree').treeview('getParent', node.nodeId);
        if (!("nodeId" in parentNode)) {
            return;
        } else {
            checkAllParent(parentNode);
        }
    }
    //取消全部父节点
    function uncheckAllParent(node) {
        $('#searchTree').treeview('uncheckNode', node.nodeId, {
            silent: true
        });
        var siblings = $('#searchTree').treeview('getSiblings', node.nodeId);
        var parentNode = $('#searchTree').treeview('getParent', node.nodeId);
        if (!("nodeId" in parentNode)) {
            return;
        }
        var isAllUnchecked = true; //是否全部没选中
        for (var i in siblings) {
            if (siblings[i].state.checked) {
                isAllUnchecked = false;
                break;
            }
        }
        if (isAllUnchecked) {
            uncheckAllParent(parentNode);
        }
    }

    //级联选中所有子节点
    function checkAllSon(node) {
        $('#searchTree').treeview('checkNode', node.nodeId, {
            silent: true
        });
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                checkAllSon(node.nodes[i]);
            }
        }
    }

    //级联取消所有子节点
    function uncheckAllSon(node) {
        $('#searchTree').treeview('uncheckNode', node.nodeId, {
            silent: true
        });
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                uncheckAllSon(node.nodes[i]);
            }
        }
    }

    $(function () {
        //权限树节点数据
        var data = [
            {
                text: '系统管理',
                nodes: [
                    {
                        text: '系统用户管理',
                        nodeid: '11'
                    },
                    {
                        text: '用户角色管理'
                    },
                    {
                        text: '部门管理'
                    },
                    {
                        text: '权限管理'
                    }
                ]
            },
            {
                text: '邮件信息管理',
                nodes: [
                    {
                        text: '邮件基础信息管理'
                    }
                ]
            },
            {
                text: '运输系统管理',
                nodes: [
                    {
                        text: '车辆管理'
                    },
                    {
                        text: '驾驶员管理'
                    },
                    {
                        text: '车辆类型管理'
                    },
                    {
                        text: '车辆驾驶员工作记录管理'
                    }
                ]
            },
            {
                text: '段道管理',
                nodes: [
                    {
                        text: '配送人员管理'
                    },
                    {
                        text: '配送车辆管理'
                    },
                    {
                        text: '配送人员配置管理'
                    }
                ]
            }, {
                text: '配送管理',
                nodes: [
                    {
                        text: '调整排序'
                    },
                    {
                        text: '邮件分配管理'
                    },
                    {
                        text: '路径规划管理'
                    },
                    {
                        text: '协同配送'
                    },
                    {
                        text: '客户签收管理'
                    },
                    {
                        text: '签收类型管理'
                    }
                ]
            }
        ];
        $('#searchTree').treeview({//初始化权限树，把节点数据，就是data数据添加到树里面
            showCheckbox: true,//确认展示checkbox
            data: data,//数据
            onNodeChecked: nodeChecked,//当选中节点check时响应函数
            onNodeUnchecked: nodeUnchecked//当不选中时响应函数，就是用于级联效果
        });
    })
</script>
<body class="container">
<h1 class="text-center"><i>hello</i></h1>
<h1 class="text-center"><button class="btn btn-default">提交</button></h1>
<div id="searchTree"></div>

</body>
</html>